import React from 'react';
import { Card, Button, Tooltip } from 'antd';
import { ZoomOutOutlined, ZoomInOutlined } from '@ant-design/icons';
import { useEventListener } from 'ahooks';
import classNames from 'classnames';

import { zoomSizes } from '../../constant';

import { ScreenControllerRealTimePreviewProps } from '../../interface';

import styles from './index.module.less';


interface ScreenControllerProps {
  zoomIndex: number;
  productImageIndex: number;
  setZoomIndex: (value: number) => void;
  realTimePreview: (props: ScreenControllerRealTimePreviewProps) => void;
  historyCount: number;
  historyIndex: number;
  onHistoryIndexChange: (index: number) => void;
}

const ScreenController = (props: ScreenControllerProps): JSX.Element => {
  const {
    zoomIndex,
    setZoomIndex,
    historyCount,
    historyIndex,
    onHistoryIndexChange
  } = props;

  const decreaseZoomSize = (): void => {
    setZoomIndex(zoomIndex - 1);
  };

  const increaseZoomSize = (): void => {
    setZoomIndex(zoomIndex + 1);
  };

  const disabledHistoryBack = historyCount < 1 || historyIndex <= 0;
  const disabledHistoryForward =
    historyCount < 1 || historyIndex >= historyCount - 1;

  const historyBack = (): void => {
    if (disabledHistoryBack) {
      return;
    }

    onHistoryIndexChange(historyIndex - 1);
  };
  const historyForward = (): void => {
    if (disabledHistoryForward) {
      return;
    }

    onHistoryIndexChange(historyIndex + 1);
  };

  useEventListener('keydown', (e) => {
    if (
      // ctrl + z 回退历史
      (e.ctrlKey || e.metaKey) &&
      (e.key === 'z' || (e.keyCode || e.charCode) === 90)
    ) {
      e.preventDefault();
      return historyBack();
    }

    if (
      // ctrl + y 前进历史
      (e.ctrlKey || e.metaKey) &&
      (e.key === 'y' || (e.keyCode || e.charCode) === 89)
    ) {
      e.preventDefault();
      return historyForward();
    }
  });

  return (
    <Card className={styles.wrapper}>
      <div className={styles['button-groups']}>
        <Button
          size="small"
          className={styles.button}
          icon={<ZoomOutOutlined />}
          onClick={decreaseZoomSize}
          disabled={zoomIndex === 0}
        />
        <Button
          size="small"
          className={styles.button}
          icon={<ZoomInOutlined />}
          onClick={increaseZoomSize}
          disabled={zoomIndex === zoomSizes.length - 1}
        />
        <div className="pt-0.5 ml-3 text-gray-secondary">
          Zoom {zoomSizes[zoomIndex]}%
        </div>
      </div>
      <div className={styles['button-groups']}>
        <Tooltip placement="top" mouseEnterDelay={1} title="Undo (Ctrl+Z)">
          <Button
            size="small"
            className={styles.button}
            disabled={disabledHistoryBack}
            onClick={historyBack}
          />
        </Tooltip>
        <Tooltip placement="top" mouseEnterDelay={1} title="Redo (Ctrl+Y)">
          <Button
            size="small"
            className={styles.button}
            disabled={disabledHistoryForward}
            onClick={historyForward}
          />
        </Tooltip>
      </div>
    </Card>
  );
};

export default ScreenController;
